import { defineComponent, Teleport, Transition } from 'vue'
import { modalProps } from './types'

import './index.scss'

export default defineComponent({
  name: 'VuaModal',
  props: modalProps,
  emits: ['update:modelValue', 'close'],
  setup(props, { emit, slots, attrs }) {
    const close = () => {
      emit('close')

      emit('update:modelValue', false)
    }

    const rendeModal = () => {
      if (props.modelValue) {
        return (
          <div class="vua-modal" onClick={close}>
            <div
              class="vua-modal__content"
              style={attrs.style as string}
              onClick={(e: Event) => {
                e.stopPropagation()
              }}
            >
              <div class="close" onClick={close}>
                <svg to="1650358598892" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" width="100%" height="100%">
                  <path
                    d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z"
                    p-id="2569"
                  ></path>
                </svg>
              </div>
              {slots.default ? slots.default() : ''}
            </div>
          </div>
        )
      }
    }

    return () => {
      return (
        <Teleport to="body">
          <Transition name="modal">{rendeModal()}</Transition>
        </Teleport>
      )
    }
  }
})
